<template>
	<div class="container-out" ref="out">
		<div class="container-inner" ref="inner">
			<div class="stepsBox" :ref="'item' + i" v-for="(item, i) in stepsList" :key="i">
				<div class="stepsImg" @click="$emit('clickCurrentStep', item, 'item' + i)">
					<div class="stepsImgBgBox">
						<div
							class="stepsImgBox"
							:style="{
								backgroundColor: item.isActive ? '#ccdffe' : '#F7F7F7'
							}"
						>
							<div
								class="stepsImgInnerBox"
								:style="{
									backgroundColor: item.isActive ? '#3b85fe' : '#E3E3E3'
								}"
							>
								<div class="stepsText">
									{{ i + 1 }}
								</div>
							</div>
						</div>
					</div>
					<div class="stepsTextBottom" v-show="item.title && item.title.length > 0">
						{{ item.title }}
					</div>
					<div class="bottom-tips">
						{{ item.result }}
					</div>
				</div>
				<div class="stepsLine" :style="{ borderColor: '#E3E3E3' }"></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'commonSteps',
	components: {},
	data() {
		return {}
	},
	computed: {},
	props: {
		// 数据源
		stepsList: {
			type: Array,
			require: true,
			default: () => {
				return [
					{
						title: '标题1',
						isActive: true,
						index: 0
					},
					{
						title: '标题2',
						isActive: false,
						index: 1
					},
					{
						title: '标题3',
						isActive: false,
						index: 2
					}
				]
			}
		},
		disabled: {
			type: Boolean,
			require: false,
			default: false
		}
	},
	methods: {
		changeSteps(val, refName) {
			// 计算距离让步骤条滚动
			let screenWidth = this.$refs.out.offsetWidth //屏幕宽度
			let itemLeftWidth = this.$refs[refName][0].getBoundingClientRect().left // 当前点击项距离左侧盒子宽度
			if (itemLeftWidth >= screenWidth / 2) {
				if (refName == 'item4' || refName == 'item5' || refName == 'item6') {
					this.$refs.out.scrollTo({
						left: 400,
						behavior: 'smooth'
					})
				} else {
					this.$refs.out.scrollTo({
						left: 200,
						behavior: 'smooth'
					})
				}
			}
			if (itemLeftWidth < 120) {
				this.$refs.out.scrollTo({
					left: -200,
					behavior: 'smooth'
				})
			}
			// 给步骤条填充选中的背景色
			if (this.stepsList && this.stepsList.length > 0 && !this.disabled) {
				let i = this.stepsList.findIndex((item) => {
					return item.index === val.index
				})
				for (let j = 0; j < this.stepsList.length; j++) {
					if (j == i) {
						this.stepsList[j].isActive = true
					} else {
						this.stepsList[j].isActive = false
					}
				}
			}
		}
	}
}
</script>
<style lang="less" scoped>
.container-out {
	// max-height: 260px;
	width: 100%;
	padding: 30px 0;
	overflow-x: scroll;
	background-color: #fff;
	.container-inner {
		font-size: 30px;
		display: flex;
		width: 1100px;
		height: 220px;
		margin: 0 4px;
		padding-left: 40px;
		.stepsBox {
			position: relative;
			flex: 1;
			min-width: 200px;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.stepsImg {
				position: relative;
				width: 100%;
				margin-right: 40px;
				// height: 100px;
				background-color: #fff;
				z-index: 1;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				.stepsImgBox {
					position: relative;
					width: 100px;
					height: 100px;
					border-radius: 100px;
					// background-color: #ccdffe;
					display: flex;
					justify-content: center;
					align-items: center;
					.stepsImgInnerBox {
						width: 84px;
						height: 84px;
						line-height: 84px;
						border-radius: 84px;
						// background-color: #3b85fe;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #ffffff;
						// font-weight: bold;
						.stepsText {
							font-size: 50px;
						}
					}
				}
				.stepsTextBottom {
					position: absolute;
					bottom: 60px;
					left: 50%;
					transform: translateX(-50%);
					width: 210px;
					height: 40px;
					color: #333333;
					font-size: 26px;
					text-align: center;
					// margin-top: 16px;
				}
				.bottom-tips {
					width: 170px;
					height: 40px;
					line-height: 44px;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					color: #ffa530;
					background-color: rgba(255, 165, 48, 0.203);
					font-size: 24px;
					border-radius: 40px;
					text-align: center;
				}
			}
			.stepsLine {
				position: absolute;
				right: 0;
				// border-top: 6px dotted #3b85fe;
				border-top-width: 4px;
				border-top-style: dotted;
				width: 60px;
				top: calc(26%);
				transform: translateY(-50%);
				height: 6px;
			}
			&:last-child .stepsLine {
				display: none;
			}
		}
	}
}
</style>
